import React, { FC, useEffect } from 'react'
import {inject,observer} from 'mobx-react'
import Mytitle from '../../../../components/Mytitle'
import { Avatar, Button, Popconfirm, Table, Tag, Tooltip } from 'antd'
import { roleList } from '../../../../utils'
import { ajax } from '../../../../api'
import {

  DeleteOutlined,
  CloseCircleOutlined,
  SearchOutlined
 
  
} from '@ant-design/icons';
import { baseURL } from '../../../../api/request'

const List:FC<any>=({
  user,
  uinfo
})=> {
  const {getUserList,userList_filter,changeuser,filterUserList}=user
  const {userInfo}=uinfo
  useEffect(()=>{
    //获取过滤自己用户数据
    filterUserList(userInfo._id)
  },[])
  
   //点击确认删除
   const confirmDel=async(item:any)=>{
    let res = await ajax.userdelete({_id:item._id})
    if(res.code==200){
      //过滤掉被删除的数据
      var list = userList_filter.filter((v:any)=>v._id!=item._id);
      changeuser(list)
    }
  }

  const columns:any = [
    {
      title: '序号',
      dataIndex: '_v',
      render:(text:any,item:any,index:any)=>{
        return index+1
      },
      align:'center',
      width:'80px'
      
    },
    {
      title: '头像',
      align:'center' ,
      render(value:any,item:any,index:any){
        return (
          item.avatar?<Avatar src={item.avatar.replace(/public/,baseURL)} />:<Avatar src={require('../../../../assets/images/xiaoxin_2.jpg')}></Avatar>
        )
      },
      width:'80px',
      
    },
    {
      title: '用户名',
      dataIndex: 'username',
      width:'200px',
      ellipsis:true
    }, 
    {
      title: '联系电话',
      dataIndex: 'phone',
      width:'200px',
      ellipsis:true
    }, 
    {
      title:"权限"  ,
      align:'center' ,
      width:"80px",
      dataIndex:"role",
      render(value:any,item:any,index:any){
        return (
          <Tag color={roleList.find(item=>item.value==value)?.color}>
            {roleList.find(item=>item.value==value)?.label}
          </Tag>
        )
      }
    },
    {
      title:"操作"  ,
      align:'center' ,
      width:"80px",
      render(value:any,item:any,index:any){
        return (
         <div>
           {
               <Popconfirm
                title="确定删除吗?"
                onConfirm={()=>confirmDel(item)}
                okText="删除"
                cancelText="取消"
              >
                <Tooltip title="点击删除">
                  <Button type="primary"  shape="circle" danger icon={<CloseCircleOutlined />} size="small" />
                </Tooltip>
              </Popconfirm>
              }
         </div>
        )
      }
    },
  ];
  return (
    <div>
        {/* <Mytitle text="用户展示"></Mytitle> */}
        <div className='list_div'>
        <Table dataSource={userList_filter} rowKey={record => record._id} columns={columns} pagination={{pageSize:5}} />
        </div>

        
    </div>
  )
}
export default inject("user",'uinfo')(observer(List))